import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Popover Menu

A popover menu displays a menu in a portal aligned to a child.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.popover_menu/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='popover-menu' query={{}} height={500}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    class PopoverMenuPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) => FHeader(
        title: const Text('Edit Notes'),
        suffixes: [
          FPopoverMenu(
            autofocus: true,
            menuAnchor: Alignment.topRight,
            childAnchor: Alignment.bottomRight,
            menu: [
              FItemGroup(
                children: [
                  FItem(prefix: const Icon(FIcons.user), title: const Text('Personalization'), onPress: () {}),
                  FItem(prefix: const Icon(FIcons.paperclip), title: const Text('Add attachments'), onPress: () {}),
                  FItem(prefix: const Icon(FIcons.qrCode), title: const Text('Scan Document'), onPress: () {}),
                ],
              ),
              FItemGroup(
                children: [
                  FItem(prefix: const Icon(FIcons.list), title: const Text('List View'), onPress: () {}),
                  FItem(prefix: const Icon(FIcons.layoutGrid), title: const Text('Grid View'), onPress: () {}),
                ],
              ),
            ],
            builder: (context, controller, child) => FHeaderAction(icon: const Icon(FIcons.ellipsis), onPress: controller.toggle),
          ),
        ],
      );
    }
    ```

  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create popover-menu
```

## Usage

### `FPopoverMenu(...)`

```dart copy
FPopoverMenu(
  popoverController: FPopoverController(vsync: this),
  scrollController: ScrollController(),
  style: FPopoverMenuStyle(...),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  menuAnchor: Alignment.topCenter,
  childAnchor: Alignment.bottomCenter,
  spacing: FPortalSpacing.zero,
  overflow: FPortalOverflow.flip,
  offset: Offset.zero,
  groupId: 'popover-menu-group',
  hideRegion: FPopoverHideRegion.excludeChild,
  onTapHide: () {},
  traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop,
  menuBuilder: (context, controller, menu) => [FItemGroup(children: [])],
  menu: [
    FItemGroup(
      children: [],
    ),
  ],
  builder: (context, controller, child) => const Placeholder(),
  child: const Placeholder(),
);
```

### `FPopoverMenu.tiles(...)`

```dart copy
FPopoverMenu.tiles(
  popoverController: FPopoverController(vsync: this),
  scrollController: ScrollController(),
  style: FPopoverMenuStyle(...),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  menuAnchor: Alignment.topCenter,
  childAnchor: Alignment.bottomCenter,
  spacing: FPortalSpacing.zero,
  overflow: FPortalOverflow.flip,
  offset: Offset.zero,
  groupId: 'popover-menu-group',
  hideRegion: FPopoverHideRegion.excludeChild,
  traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop,
  menuBuilder: (context, controller, menu) => [FTileGroup(children: [])],
  menu: [
    FTileGroup(
      children: [],
    ),
  ],
  builder: (context, controller, child) => const Placeholder(),
  child: const Placeholder(),
);
```

## Examples

### Tiles

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='popover-menu' variant='tiles' query={{}} height={500}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {6} copy
    class PopoverMenuPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) => FHeader(
        title: const Text('Edit Notes'),
        suffixes: [
          FPopoverMenu.tiles(
            autofocus: true,
            menuAnchor: Alignment.topRight,
            childAnchor: Alignment.bottomRight,
            menu: [
              FTileGroup(
                children: [
                  FTile(prefix: const Icon(FIcons.user), title: const Text('Personalization'), onPress: () {}),
                  FTile(prefix: const Icon(FIcons.paperclip), title: const Text('Add attachments'), onPress: () {}),
                  FTile(prefix: const Icon(FIcons.qrCode), title: const Text('Scan Document'), onPress: () {}),
                ],
              ),
              FTileGroup(
                children: [
                  FTile(prefix: const Icon(FIcons.list), title: const Text('List View'), onPress: () {}),
                  FTile(prefix: const Icon(FIcons.layoutGrid), title: const Text('Grid View'), onPress: () {}),
                ],
              ),
            ],
            builder: (context, controller, child) => FHeaderAction(icon: const Icon(FIcons.ellipsis), onPress: controller.toggle),
          ),
        ],
      );
    }
    ```

  </Tabs.Tab>
</Tabs>
